<template>
  <el-card style="margin: 24px;" shadow="never">
    <el-dialog title="查看图片" :visible.sync="imgShow" center>
      <span style="width: 100%;" element-loading-background="rgba(0, 0, 0, 0.3)">
        <transition name="fade" mode="out-in">
          <img v-show="!imgLoading" ref="img" style="heigth: 100%; width: 100%;" :src="imageUrl" @load="loadImg">
        </transition>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgShow = false">取 消</el-button>
        <el-button type="primary" @click="imgShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看XML" :visible.sync="xmlShow" center>
      <span>
        <el-input v-model="xmlText" :autosize="{ maxRows: 20}" type="textarea" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xmlShow = false">取 消</el-button>
        <el-button type="primary" @click="xmlShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <el-upload action="/" multiple style="display: inline-block;">
      <el-button type="primary" icon="el-icon-upload2">导入模板</el-button>
    </el-upload> -->
    <!-- <el-button type="primary" icon="el-icon-upload2">导入模板</el-button> -->
    <el-button type="primary" icon="el-icon-plus" @click="newModel">新建</el-button>
    <el-button style="float: right;" icon="el-icon-refresh" @click="getList()" />
    <el-dialog
      :visible.sync="newModelShow"
      width="90%"
      center
    >
      <span>
        <modelNew />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newModelShow = false">取 消</el-button>
        <el-button type="primary" @click="newModelShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <br>
    <br>

    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-popconfirm title="确认部署模板" @onConfirm="deploy(scope.row.id)">
            <el-button slot="reference" size="mini" type="text">部署</el-button>
          </el-popconfirm>
          <el-button size="mini" type="text" @click="loadXmlByModelId(scope.row.id)">查看XML</el-button>
          <el-button size="mini" type="text" @click="loadPngByModelId(scope.row.id)">查看图片</el-button>
          <el-button size="mini" type="text" @click="edit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="key">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.key }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createdBy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ datetimeFormatter(scope.row.created) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 16px;"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import { fetchList, deploy, loadXmlByModelId, loadPngByModelId } from '@/api/model'
import * as fecha from 'element-ui/lib/utils/date'

import modelNew from '@/views/engine/modelNew'
export default {
  name: 'EngineModel',

  components: {
    modelNew
  },
  data() {
    return {

      currentPage: 0,
      total: 40,
      pageSize: 10,

      tableData: [],

      imgShow: false,
      imageUrl: '',
      xmlShow: false,
      xmlText: '',
      imgLoading: true,

      newModelShow: false,

      loading: false

    }
  },

  created() {
    this.getList()
  },
  methods: {

    datetimeFormatter(val) {
      if (val == null) {
        return val
      }
      const dt = fecha.format(new Date(val), 'yyyy-MM-dd HH:mm:ss')
      return dt
    },

    loadImg() {
      this.imgLoading = false
    },

    edit(modelId) {
      // this.$message({
      //   showClose: true,
      //   message: '暂未开发',
      //   type: 'info'
      // })
      this.$router.push({ path: '/engine/model-new', query: { modelId: modelId }})
    },

    loadPngByModelId(modelId) {
      // this.imgLoading = true
      // const tmpImageUrl = '/cims/rest/model/loadPngByModelId/' + modelId
      // if (tmpImageUrl === this.imageUrl) {
      //   this.imgLoading = false
      // } else {
      //   this.imageUrl = '/cims/rest/model/loadPngByModelId/' + modelId
      // }
      // this.imgShow = true

      loadPngByModelId(modelId).then(response => {
        const imageUrl = 'data:image/png;base64,' + response
        this.imageUrl = imageUrl
        this.imgShow = true
      })
    },

    loadXmlByModelId(modelId) {
      loadXmlByModelId(modelId).then(response => {
        this.xmlText = response
        this.xmlShow = true
      })
    },

    deploy(modelId) {
      deploy({
        modelId: modelId
      }).then(response => {
        if (response.code === '100') {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'error'
          })
        }
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      const query = {
        pageNum: 0,
        pageSize: val
      }
      this.getList(query)
    },

    handleCurrentChange(val) {
      const query = {
        pageNum: val,
        pageSize: this.pageSize
      }
      this.getList(query)
    },

    newModel() {
      this.$router.push('/engine/model-new')
      // this.newModelShow = true
    },

    getList(query) {
      this.loading = true
      if (typeof query === 'undefined') {
        query = {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }
      fetchList(query).then(response => {
        this.tableData = response.data.data
        this.total = response.data.total
        this.loading = false
      }).catch((e) => {
        console.error(e)
        this.loading = false
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
